<script setup lang="ts">
import { PropType, ref, watch } from 'vue';
import ActionEl from "./Action.vue";
import FilterEl from "./Filter.vue";
const
  props = defineProps({
    filter: { type: Array as PropType<gt.components.SideBar.Filter[]> },
    action: { type: Array as PropType<gt.components.SideBar.Action[]> },
    modelValue: { type: Object as PropType<gt.components.SideBar.Action> },
  }),
  actionCurrent = ref<gt.components.SideBar.Action>(),
  emit = defineEmits<{
    (event: "filter", value: gt.components.SideBar.Filter): void;
    (event: "action", value: gt.components.SideBar.Action, e: MouseEvent): void;
    (event: "update:modelValue", value: gt.components.SideBar.Action): void;
  }>();
function onAction(value: gt.components.SideBar.Action, e: MouseEvent) {
  emit("action", value, e);
  emit("update:modelValue", value);
}
function onFilter(value: gt.components.SideBar.Filter) {
  emit("filter", value);
}
watch(() => props.modelValue, (n) => { actionCurrent.value = n; }, { immediate: true });
</script>
<template>
  <div class="y SideBar">
    <FilterEl :data="filter" @filter="onFilter" />
    <ActionEl :data="action" @action="onAction" v-model:modelValue="actionCurrent" />
  </div>
</template>
<style lang="scss" scoped>
.SideBar {
  position: relative;
  width: 20em;
  flex-shrink: 0;
  background-color: var(--color-back);
  overflow: hidden auto;
}
</style>